<template>
  <div class="app-container home">
    <h2><b>MindMax新B端运营管理系统</b> （ <span style="color: red;">version:{{ version }}</span>）</h2>
    <hr>
    <div v-if="showAnnouncement" class="announcement">
      <span class="close-btn" @click="closeAnnouncement">关闭</span>
      <h3 class="announcement-title">{{ title }}</h3>
      <p class="announcement-time">发布时间：{{ createTime }}</p>
      <p class="announcement-content" v-html="content" />
    </div>
  </div>
</template>

<script>
import { getLatestNotice } from '@/api/system/notice'

export default {
  name: 'Index',
  data() {
    return {
      // 版本号
      version: '1.0',
      createTime: '',
      content: '',
      title: '',
      showAnnouncement: true

    }
  },
  mounted() {
    // 获取最新公告
    getLatestNotice().then(response => {
      console.log(response.data)
      if (response.data.noticeContent === '') {
        this.showAnnouncement = false
      } else {
        this.content = response.data.noticeContent
        this.createTime = response.data.createTime
        this.title = response.data.noticeTitle
        this.showAnnouncement = true
      }
    }
    )
  },
  methods: {
    closeAnnouncement() {
      this.showAnnouncement = false
    },
    goTarget(href) {
      window.open(href, '_blank')
    }
  }
}
</script>

<style scoped lang="scss">

.announcement {
  position: fixed;
  bottom: 10px; /* 距离页面底部10px */
  right: 10px; /* 距离页面右侧10px */
  width: 400px; /* 设置宽度为300px */
  background-color: #fdf5e6; /* 轻柔的背景色 */
  border: 1px solid #f0e68c; /* 边框颜色 */
  padding: 10px;
  border-radius: 5px; /* 圆角边框 */
  z-index: 1000; /* 确保公告在页面其他内容的上方 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.close-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
}

.announcement-title {
  color: #ff4500; /* 标题颜色 */
  margin: 0;
  padding-bottom: 5px;
}

.announcement-time {
  color: #8b4513; /* 时间颜色 */
  font-style: italic; /* 斜体 */
  margin: 0;
  padding-bottom: 10px;
  font-size: 10px;
}

.announcement-content {
  color: #1d1ad3; /* 内容颜色 */
  margin: 0;
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

